<template>
  <div class="min-h-screen bg-gradient-to-br from-blue-50 to-purple-50 py-8">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <!-- Header -->
      <div class="text-center mb-12">
        <h1 class="text-4xl font-bold text-gray-900 mb-4">
          <span class="text-gradient">智能算命</span>
        </h1>
        <p class="text-xl text-gray-600 max-w-3xl mx-auto">
          提供各种智能算命，包括智能对话等
        </p>
      </div>

      <!-- Tool Grid -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div v-for="tool in encodeTools" :key="tool.id" class="tool-card">
          <div class="flex items-start space-x-4">
            <div class="w-12 h-12 bg-gradient-to-br from-green-500 to-green-600 rounded-lg flex items-center justify-center flex-shrink-0">
              <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="tool.icon"></path>
              </svg>
            </div>
            <div class="flex-1">
              <h3 class="text-lg font-semibold text-gray-900 mb-2">{{ tool.name }}</h3>
              <p class="text-gray-600 text-sm mb-3">{{ tool.description }}</p>
              <NuxtLink :to="tool.path" class="primary-button inline-block">
                开始使用
              </NuxtLink>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
definePageMeta({ middleware: 'admin-access' })
const encodeTools = [
  {
    id: 1,
    name: '智能对话',
    description: '与AI进行智能对话',
    path: '/ai-tools/chat',
    icon: 'M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z'
  }
  ,
  {
    id: 2,
    name: '紫薇排盘',
    description: '生成紫微斗数星盘',
    path: '/ai-tools/ziwei',
    icon: 'M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z'
  },
  {
    id: 3,
    name: '八字合婚',
    description: '生成八字合婚信息',
    path: '/ai-tools/bzhh',
    icon: 'M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z'
  },
  {
    id: 4,
    name: '宝宝起名',
    description: '生成宝宝起名信息',
    path: '/ai-tools/bbqm',
    icon: 'M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z'
  },
  {
    id: 5,
    name: '八字精批',
    description: '生成八字精批信息',
    path: '/ai-tools/bzjp',
    icon: 'M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z'
  },
  {
    id: 6,
    name: '周易算卦',
    description: '生成周易算卦信息',
    path: '/ai-tools/zhouyi',
    icon: 'M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z'
  }
]

// SEO
useHead({
  title: '智能算命 - 八八在线工具',
  meta: [
    { name: 'description', content: '在线智能算命，提供智能对话等多种实用功能' },
    { property: 'og:title', content: '智能算命 - 八八在线工具' },
    { property: 'og:description', content: '在线智能算命,提供智能对话等多种实用功能' }
  ]
})
</script>